<template>
    <div class="carouselBox">
        <slider class="slider" show-indicators="true" scrollable="true" interval="2800" :auto-play="carouselAuto">
            <div @click="gogo($event)" class="frame" show-indicators="true" v-for="i in pic">
                <image class="image" resize="cover" style="width:750px;height:400px" :src="i"></image>
            </div>
            <indicator class="indicator"></indicator>
        </slider>
    </div>
</template>

<script>
    import "../../../web/js/autosimplelb"
    import "../../../web/js/js-function"
    export default {
        data(){
            return{
                pic:[
                    "../../../web/img/logo.png",
                    "../../../web/img/logo.png",
                    "../../../web/img/logo.png",
                    "../../../web/img/logo.png",
                    "../../../web/img/logo.png",
                    "../../../web/img/logo.png",
                    "../../../web/img/logo.png",
                ]
            }
        },
        props:["carouselAuto"],
        name: "index-carousel",
        methods:{
            gogo(e){
                this.$router.push("/goodsServe");
                // this.$router.push("/goodsSell");
            },
        },
        mounted:function(){

/*            // // 获取moveBox dom节点
            var mbox=document.getElementsByClassName("frame")[0];
            // // 获取图片数
            var mslide=document.getElementsByClassName("pic");
            // // 获取窗口宽度
            var windowWidth=document.body.clientWidth;
            // // 计算moveBox宽度
            mbox.style.width=mslide.length*windowWidth+"px";*/

            // console.log(windowWidth);
            // console.log(mslide.length);
            // console.log(curWidth);
            // console.log(mleft);

        },

        updated:function(){

        }
    }
</script>

<style scoped>
    .indicator{
        position: absolute;
        width: 750px;
        height: 300px;
        item-color: rgba(255, 255 ,255, 0.5);
        item-selected-color: orange;
        item-size: 14px;
        /*item-border:1px solid #000;*/
        /*left:50%;*/
        bottom:-110px;
        /*transform: translateX(-50%);*/
        z-index:999;
    }
    .image {
        width: 750px;
        height: 400px;
    }
    .slider {

        width: 750px;
        height: 400px;
    }
    .frame {
        width: 750px;
        height: 400px;
        position: relative;
    }

/*.carouselBox{*/
    /*!*overflow-y: scroll;*!*/
    /*width:750px;*/
    /*height:400px;*/
    /*overflow: hidden;*/
    /*position: relative;*/
/*}*/

</style>